<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<header id="header">
    <div class="title">合拍街</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <div class="choose-option">
        <ul class="clearfix">
            <li class="w25 fl neijian-box fz16">
                <div class="option-area clearfix">
                    <a href="#">上海</a>
                    <i class="iconfont fr"></i>
                </div>
                <div class="option-area-list">
                    <ul>
                        <li>
                            <div class="clearfix">
                                <a href="#">北京</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">深圳</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">广州</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">广州</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="w25 fl neijian-box fz16">
                <div class="option-area clearfix">
                    <a href="#">费用</a>
                    <i class="iconfont fr"></i>
                </div>
                <div class="option-area-list">
                    <ul>
                        <li>
                            <div class="clearfix">
                                <a href="#">付费</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">免费</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="w25 fl neijian-box fz16">
                <div class="option-area clearfix">
                    <a href="#">身份</a>
                    <i class="iconfont fr"></i>
                </div>
                <div class="option-area-list">
                    <ul>
                        <li>
                            <div class="clearfix">
                                <a href="#">学生</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">在职</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">赋闲</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="w25 fl neijian-box fz16">
                <div class="option-area clearfix">
                    <a href="#">性别</a>
                    <i class="iconfont fr"></i>
                </div>
                <div class="option-area-list">
                    <ul>
                        <li>
                            <div class="clearfix">
                                <a href="#">男</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                        <li>
                            <div class="clearfix">
                                <a href="#">女</a>
                                <i class="iconfont fr"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="carousel">
        <ul>
            <li>
                <a href="#">
                    <img class="imgauto" src="./images/topic.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="imgauto" src="./images/topic.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="imgauto" src="./images/topic.png" alt="">
                </a>
            </li>
        </ul>
        <ol class="points"></ol>
    </div>
    <div class="hepai-verify">
        <ul class="clearfix">
            <li class="w25 fl">
                <a href="#">
                    <img src="./images/verifypeople.png" alt="">
                    <p>验证身份</p>
                </a>
            </li>
            <li class="w25 fl">
                <a href="#">
                    <img src="./images/verifymoblie.png" alt="">
                    <p>验证手机</p>
                </a>
            </li>
            <li class="w25 fl">
                <a href="#">
                    <img src="./images/manyschool.png" alt="">
                    <p>众多校区</p>
                </a>
            </li>
            <li class="w25 fl">
                <a href="#">
                    <img src="./images/youngcommunity.png" alt="">
                    <p>年轻社区</p>
                </a>
            </li>
        </ul>
    </div>
    <div id="home-content">
        <div class="hot-street">
            <p class="tex-center">热门街</p>
            <ul class="clearfix">
                <li>
                    <a href="home/theme.html">
                        <img src="./images/11.png" alt="">
                    </a>
                    <p>日系小清新</p>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/11.png" alt="">
                    </a>
                    <p>古风约拍</p>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/11.png" alt="">
                    </a>
                    <p>一起街拍吧</p>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/11.png" alt="">
                    </a>
                    <p>橘子的夏日</p>
                </li>
            </ul>
        </div>
        <div class="user-content clearfix">
            <div class="fl clearfix w80 ">
                <div class="fl user-pic">
                    <a href="home/member.html">
                        <img src="./images/user.png" alt="">
                    </a>
                </div>
                <div class="fl user-info">
                    <div class="clearfix">
                        <p class="fl">睡不醒的木鱼</p>
                        <div class="fl user-icon">
                            <img class="fl" src="skin/xhdpi/sex_w.png">
                            <img class="fl" src="skin/xhdpi/sex_m.png">
                            <img class="fl" src="skin/xhdpi/authentication.png">
                            <img class="fl" src="skin/xhdpi/phone_m.png">
                        </div>
                    </div>
                    <div class="user-info-label">
                        <span>摄影爱好者</span>
                        <span>90后</span>
                        <span>双鱼座</span>
                        <span class="info-color2">希望互免</span>
                    </div>
                </div>
            </div>
            <div class="fr w20 mal-all-box ">
                <div class="mail-box">
                    <a href="#">
                        <img src="./skin/xhdpi/mail.png" alt="">
                    </a>
                    <div class="number">4</div>
                </div>
                <p class="fz12" style="line-height:16px;">收到邀请</p>
            </div>
            <div class="user-content-pic">
                <ul class="clearfix">
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                </ul>
                <div class="address-time clearfix">
                    <img class="fl" src="./skin/xhdpi/mark_gray.png" alt="">
                    <span class="fl">上海 上午 10:00</span>
                </div>
            </div>
        </div>
        <div class="user-content clearfix">
            <div class="fl clearfix w80 ">
                <div class="fl user-pic">
                    <a href="home/member.html">
                        <img src="./images/user.png" alt="">
                    </a>
                </div>
                <div class="fl user-info">
                    <div class="clearfix">
                        <p class="fl">睡不醒的木鱼</p>
                        <div class="fl user-icon">
                            <img class="fl" src="skin/xhdpi/sex_w.png">
                            <img class="fl" src="skin/xhdpi/sex_m.png">
                            <img class="fl" src="skin/xhdpi/authentication.png">
                            <img class="fl" src="skin/xhdpi/phone_m.png">
                        </div>
                    </div>
                    <div class="user-info-label">
                        <span>摄影爱好者</span>
                        <span>90后</span>
                        <span>双鱼座</span>
                        <span class="info-color2">希望互免</span>
                    </div>
                </div>
            </div>
            <div class="fr w20 mal-all-box ">
                <div class="mail-box">
                    <a href="#">
                        <img src="./skin/xhdpi/mail.png" alt="">
                    </a>
                    <div class="number">4</div>
                </div>
                <p class="fz12" style="line-height:16px;">收到邀请</p>
            </div>
            <div class="user-content-pic">
                <ul class="clearfix">
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/11.png" alt="">
                        </a>
                    </li>
                </ul>
                <div class="address-time clearfix">
                    <img class="fl" src="./skin/xhdpi/mark_gray.png" alt="">
                    <span class="fl">上海 上午 10:00</span>
                </div>
            </div>
        </div>
    </div>
    <footer id="footer" class="foot">
        <ul>
            <li class="active">
                <a class="home" href="index.html">
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a class="find" href="find/index.html">
                    <p>发现</p>
                </a>
            </li>
            <li>
                <a class="camera" href="ranking/index.html">
                    <p>合拍榜</p>
                </a>
            </li>
            <li>
                <a class="person" href="user/user_login.html">
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
    <!--<div id="go-top" class="go-top">-->
    <!--<a href="javascript:goTop();" class="iconfont">&#xe610;</a>-->
    <!--</div>-->
</div>

</body>

<!--回到顶部-->
<script type="text/javascript">
    // var $top = $('#go-top');
    // $(window).bind('scroll', function() {
    //     var $this = $(this);
    //     if ($this.scrollTop() > 360) {
    //         $top.show();
    //     } else {
    //         $top.hide();
    //     }
    // })

    // function goTop() {
    //     $('html,body').animate({
    //         scrollTop: 0
    //     }, 400)
    // }
    $(function () {
        var $optionAreas = $(".option-area");
        var flag = true;
        $optionAreas.on("click", function () {
            if (flag) {
                $(this).siblings(".option-area-list").show();
            } else {
                $(this).siblings(".option-area-list").hide();
            }
            flag = !flag;

        })
    })
    // 轮播图js
    var carousel = document.querySelector('.carousel');
    var ul = carousel.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    var ol = carousel.querySelector('ol');

    // 屏幕的宽度
    var screenWidth = document.documentElement.offsetWidth;
    var timer = null;
    // 计算UL的高度
    ul.style.height = lis[0].offsetHeight + 'px';
    for (var i = 0; i < lis.length; i++) {
        var li = document.createElement('li');
        if (i == 0) {
            li.classList.add('active');
        }
        ol.appendChild(li);
    }
    var points = ol.querySelectorAll('li');
    var center = 0;
    var right = 1;
    var left = lis.length - 1;
    // 让三张图片先就位
    lis[center].style.transform = 'translateX(0px)';
    lis[right].style.transform = 'translateX(' + screenWidth + 'px)';
    lis[left].style.transform = 'translateX(' + -screenWidth + 'px)';
    timer = setInterval(showNext, 1500);

    function showNext() {
        // 轮转下标
        left = center; // left = 0
        center = right; // center = 1
        right++; // right = 2

        //极值判断
        if (right > lis.length - 1) {
            right = 0;
        }

        // 添加过渡 过渡时间小于定时器时间
        lis[left].style.transition = 'transform .5s';
        lis[center].style.transition = 'transform .5s';
        //右边这个图片永远是替补的那一张,所以不需要添加过渡
        lis[right].style.transition = 'none';

        // 归位
        // left = lis.length - 1    left = 0
        // center = 0          		center = 1
        // right = 1 				right = 2
        lis[left].style.transform = 'translateX(' + -screenWidth + 'px)';
        lis[center].style.transform = 'translateX(0px)';
        lis[right].style.transform = 'translateX(' + screenWidth + 'px)';
        // 设置小圆点
        setPoints();

    }

    function setPoints() {
        for (var i = 0; i < points.length; i++) {
            points[i].classList.remove('active');
        }

        points[center].classList.add('active');
    }
</script>

</html>